<template>
  <div class="wrapper">
    <h2 class="title">头条</h2>
    <ul>
      <li>
        <!--  模块一 -->
        <div class="itemA border-bottom" v-for="item of ListA" :key="item.id">
          <p class="itemA-title">{{item.title}}</p>
          <div class="itemA-img">
            <div class="img-wrapper" v-for="itemimg of item.imgUrl"><img class="img" :src="itemimg.img"></div>
          </div>
          <div class="time"><span>{{item.figure}}</span> &nbsp <span>{{item.time}}</span></div>
        </div>
        <!--  模块二 -->
            <!--        <div class="itemB border-bottom" v-for="item of ListB" :key="item.id">
          <div class="itemB-left">
            <div class="itemB-left-text">{{item.title}}</div>
            <p class="itemB-time"><span>{{item.figure}}</span><span>{{item.time}}</span></p>
          </div>
          <div class="itemB-right">
            <img :src="item.imgUrl">
          </div>
        </div>-->
        <!--  模块三 -->

      </li>
    </ul>
    <!-- 查看更多 -->
    <router-link tag="div" to="/lines/" class="item-more">查看更多</router-link>
  </div>
</template>

<script>
  export default {
    name: 'HomeHeadlines',
    data () {
      return {
        ListA: [{
          id: '001',
          title: '市场成交|4月22日深圳一手住宅成交95套 成交面积9238.26平米',
          imgUrl: [{
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/17a0eecdeff54af5a3fa0ad08a4d117e.jpg?x-oss-process=image/resize,w_250',
          }, {
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/ea1ac66d891f49b18a2434027c6dd7d0.jpg?x-oss-process=image/resize,w_250',
          }, {
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/8f7bbbf42a3c45a6b20a4d1dafdd3851.jpg?x-oss-process=image/resize,w_250',
          }],
          figure: '网易惠州',
          time: '30分钟前'
        },{
          id: '002',
          title: '市场成交|4月22日深圳一手住宅成交95套 成交面积9238.26平米',
          imgUrl: [{
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/17a0eecdeff54af5a3fa0ad08a4d117e.jpg?x-oss-process=image/resize,w_250',
          }, {
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/ea1ac66d891f49b18a2434027c6dd7d0.jpg?x-oss-process=image/resize,w_250',
          }, {
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/8f7bbbf42a3c45a6b20a4d1dafdd3851.jpg?x-oss-process=image/resize,w_250',
          }],
          figure: '网易惠州',
          time: '30分钟前'
        },{
          id: '003',
          title: '市场成交|4月22日深圳一手住宅成交95套 成交面积9238.26平米',
          imgUrl: [{
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/17a0eecdeff54af5a3fa0ad08a4d117e.jpg?x-oss-process=image/resize,w_250',
          }, {
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/ea1ac66d891f49b18a2434027c6dd7d0.jpg?x-oss-process=image/resize,w_250',
          }, {
            img: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/8f7bbbf42a3c45a6b20a4d1dafdd3851.jpg?x-oss-process=image/resize,w_250',
          }],
          figure: '网易惠州',
          time: '30分钟前'
        }],
        ListB: [{
          id: '0001',
          title: '洛阳一项目拿到预售证，可售房源167套！洛阳一项目拿到预售证，可售房源167套！洛阳一项目拿到预售证，可售房源167套！洛阳一项目拿到预售证，可售房源167套！',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/zixun/20200422/17a0eecdeff54af5a3fa0ad08a4d117e.jpg?x-oss-process=image/resize,w_250',
          figure: '幸福里',
          time: '10小时前'
        }]
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"

  .wrapper
    wrapper()

  .title
    title()

  .itemA
    width 100%
    padding .3rem 0

  .itemA-title
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    line-height .8rem
    color #2f3c4d
    padding-right 1.2rem


  .itemA-img
    display flex
    flex-direction row
    justify-content space-between
    align-items center
    margin-bottom .2rem

  .img-wrapper
    width 32%
    height 1.8rem
    overflow hidden

  .img
    img()

  .time, .itemB-time
    information()

  .itemB
    item()

  .itemB-left
    width 4rem
    height 2rem
    display flex
    flex-direction column
    justify-content space-around
    padding-right .8rem

  .itemB-left-text
    overflowEllipsis2()

  .itemB-right
    width 2.3rem
    height 2rem
    overflow hidden

  .itemB-right img
    img()

  .item-more
    button()
</style>
